<script setup>
import { VContainer, VBtn } from 'vuetify/components'

const exampleObject = <%- JSON.stringify(example) %>

useHead({ title: exampleObject.title, meta: [{ 'http-equiv': 'Content-Security-Policy', 'content': 'default-src \'self\'; img-src \'self\' data:' }] })
</script>

<template>
  <v-container>
    <h1 class="text-h3 mt-8 mb-3">
      {{ exampleObject.title }}
      <v-btn
        icon="mdi-reply"
        flat
        title="get back to non-compiled page"
        :to="`/<%= exampleSuite.id %>/<%= example.id %>`"
      />
    </h1>
    <markdown-block :content="exampleObject.description" />
    <vjsf-example :example="exampleObject" :v2="<%= exampleSuite.id === 'v2' %>">
      <template #vjsf="{modelValue, options, updateState, updateModelValue}">
        <compiled-<%= exampleSuite.id %>-<%= example.id %> :model-value="modelValue" :options="options" @update:state="updateState" @update:model-value="updateModelValue">
          <%- slotsCode %>          
        </compiled-<%= exampleSuite.id %>-<%= example.id %>>
      </template>
    </vjsf-example>
  </v-container>
</template>